<template>
  <van-tabbar route class="pink-tabbar">
    <van-tabbar-item to="/" icon="home-o" class="pink-tabbar-item">首页</van-tabbar-item>
    <van-tabbar-item to="/productList" icon="gift-o" class="pink-tabbar-item">商品</van-tabbar-item>
    <van-tabbar-item to="/shopcart" icon="shopping-cart-o" class="pink-tabbar-item">购物车</van-tabbar-item>
    <van-tabbar-item to="/user" icon="user-o" class="pink-tabbar-item">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {
  // 这里可以添加组件的相关逻辑，目前为空
}
</script>

<style lang="less" scoped>
.pink-tabbar {
  background-color: #fdf2f8;
  box-shadow: 0 -2px 4px rgba(255, 107, 139, 0.1);
}

.pink-tabbar-item {
  color: #ff6b8b;
  &.van-tabbar-item--active {
    color: #e91e63;
    .van-icon {
      color: #e91e63;
    }
  }

 .van-icon {
    color: #ff6b8b;
  }
}
</style>